<template>
	<view class="son">
		<!--<pulldown :title="secondItem.title" :titleStyle="titleStyle" :openIndex="openIndex" :selfIndex="secondIndex"
		@updateOpenIndex = "updateOpenIndex" :showIcon="secondItem.children.length>0">-->
			<view class="title-content" @click="updateOpenIndex">{{secondItem.title}}</view>
			<view v-if="secondItem.indexType=='0'" :class="openIndex==secondIndex?'open':'unopen'" >
				<catalog-item v-for="(thirdItem,thirdIndex) in secondItem.children" :item="thirdItem" :isFirst="thirdIndex==0"
				 :isLast="thirdIndex==secondItem.children.length-1" :key='thirdItem.lessonId'>
				</catalog-item>
			</view>
		<!--</pulldown>-->
	</view>
</template>

<script>
	import pulldown from '@/pages/course/fragment/pulldown.vue'
	import catalogItem from '@/pages/course/fragment/catalogItem.vue'
	/**
	 * 子目录折叠
	 */
	export default{
		components:{pulldown,catalogItem},
		props:{
			secondItem:{
				type:Object,
				default(){
					return {}
				}
			},
			secondIndex:0
		},
		data(){
			return {
				titleStyle:{
					fontSize: '24rpx',
					fontWeight:'normal',
					color: '#333333',
					
				},
				openIndex:0
			}
		},
		methods:{
			updateOpenIndex(){
				if(this.openIndex == this.secondIndex ){
					this.openIndex = -1
				}else{
					this.openIndex = this.secondIndex
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.son{
		//margin-left: 60upx;
		width: 100%;
	}
	.open {
		height: auto;
		ocap: 0;
		transform: translateY(0);
	}
	.unopen {
		height: 0px;
		alpha: 1;
		transform: translateY(-50%);
	}
	.title-content {
		color: #666;
		font-size: 30upx;
		margin-left: 30upx;
		line-height: 64upx;
		margin-top: 16upx;
		position: relative;
		&::before {
			content: "";
			display: inline-block;
			width: 20upx;
			height: 20upx;
			border:1px solid #4da1ff;
			border-radius: 50%;
			border-radius: 50%;
			margin-right: 12upx;
		}
		&::after{
			content: "";
			position: absolute;
			width: 60upx;
			height: 1px;
			background-color: #e4e4e4;
			left: -60upx;
			top: 32upx;
		}
	}
</style>
